<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 库存查询 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="search-box">
                <el-form :inline="true">
                    <el-form-item label="快递单号">
                        <el-input
                            v-model="searchSet.expressNumber"
                            prefix-icon="el-icon-search"
                            clearable
                            placeholder="请输入搜索信息"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="入库起止时间">
                        <el-date-picker
                            v-model="searchSet.startTime"
                            clearable
                            type="datetime"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerTimeOptions"
                        >
                        </el-date-picker>
                        &nbsp; <label for="">~</label> &nbsp;
                        <el-date-picker
                            v-model="searchSet.endTime"
                            clearable
                            type="datetime"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerTimeOptions"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="包裹状态">
                        <el-select v-model="searchSet.status" placeholder="选择状态" clearable>
                            <el-option v-for="(item, index) in statusList" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="经手人">
                        <el-input v-model="searchSet.addUser" prefix-icon="el-icon-search" clearable placeholder="请输入经手人"></el-input>
                    </el-form-item>
                    <el-form-item label="存放位置">
                        <el-input
                            v-model="searchSet.location"
                            prefix-icon="el-icon-search"
                            clearable
                            placeholder="请输入存放位置"
                        ></el-input>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                    <el-button type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
                </el-form>
            </div>
            <el-table
                :data="tableData"
                v-loading="tableLoading"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="expressnumber" label="快递单号" align="center"></el-table-column>
                <el-table-column prop="courierName" label="快递名称" align="center"></el-table-column>
                <el-table-column prop="name" label="品名" align="center"></el-table-column>
                <el-table-column prop="repositoryName" label="仓库名称" align="center"></el-table-column>
                <el-table-column prop="addusername" label="经手人" align="center"></el-table-column>
                <el-table-column prop="location" label="位置" align="center"></el-table-column>
                <el-table-column prop="addtime" label="入库时间" align="center"></el-table-column>
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <div
                            class="CustomTag"
                            :style="{
                                'background-color': orderStatusOption[scope.row.status]
                                    ? orderStatusOption[scope.row.status].color
                                    : '#909399'
                            }"
                        >
                            {{ orderStatusOption[scope.row.status] ? orderStatusOption[scope.row.status].label : '无效' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="70" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-s-order" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="sizes, total, prev, pager, next"
                    :current-page="query.index"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="query.pageSize"
                    :total="itemTotal"
                    @current-change="handlePageChange"
                    @size-change="handlePageSizeChange"
                ></el-pagination>
            </div>
        </div>
        <detailDialog :visible.sync="detailVisible" :data="detailInfo" :dataType="detailType"></detailDialog>
    </div>
</template>

<script>
import API from '../../../api/index'; //读入restfulAPI
import StringTool from '../../../utils/StringTool';
import MainTool from '../../../utils/MainTool';
import dataTable from './dataTable';
import detailDialog from '../../common/dialog/detailDialog.vue';
export default {
    name: 'repositoryTable',
    mixins: [dataTable],
    components: {
        detailDialog
    },
    data() {
        return {
            searchSet: {
                expressNumber: '',
                startTime: '',
                endTime: '',
                status: '',
                addUser: '',
                location: ''
            },
            statusList: {
                0: { name: '无效', id: '0', tagtype: 'info' },
                1: { name: '已入库', id: '1', tagtype: 'success' },
                2: { name: '已入柜', id: '2', tagtype: 'success' },
                3: { name: '待验货', id: '3', tagtype: 'success' },
                4: { name: '待退货', id: '4', tagtype: 'success' },
                5: { name: '待换货', id: '5', tagtype: 'success' },
                6: { name: '已出库', id: '6', tagtype: 'success' },
                7: { name: '已验货', id: '7', tagtype: 'success' },
                8: { name: '已退货', id: '8', tagtype: 'success' },
                9: { name: '已换货', id: '9', tagtype: 'success' }
            },

            detailVisible: false,
            orderStatusOption: {
                0: { label: '无效', value: '0', color: '#909399' },
                1: { label: '已入库', value: '1', color: '#409EFF' },
                2: { label: '已上架', value: '2', color: 'rgb(0, 95, 217)' },
                3: { label: '待验货', value: '3', color: '#e6b600' },
                4: { label: '待退货', value: '4', color: '#e6b600' },
                5: { label: '待换货', value: '5', color: '#e6b600' },
                6: { label: '已出库', value: '6', color: '#67C23A' },
                7: { label: '已验货', value: '7', color: '#cda819' },
                8: { label: '已退货', value: '8', color: '#cda819' },
                9: { label: '已换货', value: '9', color: '#cda819' }
            },
            detailInfo: {},
            detailType: [
                {
                    attrs: { column: 2 },
                    list: [
                        { label: '包裹ID', key: 'id' },
                        { label: '添加时间', key: 'addtime' },
                        { label: '快递名称', key: 'courierName' },
                        { label: '快递单号', key: 'expressnumber' },

                        { label: '品名', key: 'name' },
                        { label: '货架位置', key: 'location' },
                        { label: '仓库名称', key: 'repositoryName' },
                        { label: '经手人', key: 'addusername' },
                        {
                            label: '包裹状态',
                            key: 'status',
                            format: (row, value) => {
                                return this.statusList[value] ? this.statusList[value].name : '无效';
                            }
                        },
                        { label: '备注', key: 'remark' },
                        { label: '图片列表', key: 'images', span: 2, type: 'imageList' },
                        { label: '视频列表', key: 'videos', span: 2, type: 'videoList' }
                    ]
                }
            ]
        };
    },
    created() {
        this.init();
    },
    methods: {
        //页面初始化
        init() {
            this.getData();
        },

        getData() {
            this.tableLoading = true;
            API.StandardDoWith(API.Package.Get(this.getQuery()), this, {
                success: (detail) => {
                    this.itemTotal = detail.count;
                    this.tableData = detail.list;
                },
                complete: () => {
                    this.tableLoading = false;
                }
            });
        },

        handleDetail(index, row) {
            let obj = Object.assign({}, row);
            obj.images = MainTool.FileIdToUrl(obj.images);
            obj.videos = MainTool.FileIdToUrl(obj.videos);
            this.detailInfo = obj;
            this.detailVisible = true;
        },
        handleExport() {
            this.$confirm('是否导出Excel数据?', '提示')
                .then(() => {
                    API.StandardDownFile(API.PackageExport(), '库存管理数据.xlsx');
                })
                .catch((err) => {});
        }
    }
};
</script>

<style scoped>
@import '../../../assets/css/dataTable.css';
</style>
